<template>
    <div class="app-container flow-mobile">
        <el-page-header @back="goBack" :content="'碾米机详情'" class="page-header">
        </el-page-header>
        <el-tabs v-model="activeTab" class="flow-tabs">
            <el-tab-pane label="启动流程" name="start">
                <!-- 启动流程内容 -->
                <div class="flow-title">启动流程</div>
                <!-- 上部分流程 -->
                <div class="section-title">谷斗有物料处理1</div>
                <div class="flow-vertical">
                    <div>
                        <flow-step
                            :title="startFlow[0].title"
                            type="sensor-wait"
                            v-model="startFlow[0].value"
                            :propertyId="startFlow[0].propertyId"
                            @submit="handleStepSubmit"
                            :index="0"
                            v-loading="startFlow[0].loading"
                        />
                        <div class="arrow-down-row"><span class="arrow-down">↓</span></div>
                    </div>
                    <div>
                        <flow-step :title="startFlow[0].name" type="action" :index="0"/>
                        <div class="arrow-down-row"><span class="arrow-down">↓</span></div>
                    </div>
                    <div>
                        <flow-step
                            :title="'等待'"
                            type="wait"
                            :propertyId="startFlow[1].propertyId"
                            v-model="startFlow[1].value"
                            @submit="handleStepSubmit"
                            :index="1"
                            v-loading="startFlow[1].loading"
                        />
                        <div class="arrow-down-row"><span class="arrow-down">↓</span></div>
                    </div>
                    <div>
                        <flow-step :title="startFlow[1].name" type="action" :index="1"/>
                    </div>
                </div>
                <!-- 下部分流程 -->
                <div class="section-title">谷斗有物料处理2</div>
                <div class="flow-vertical">
                    <div>
                        <flow-step
                            :title="startFlow[2].title"
                            type="sensor-wait"
                            v-model="startFlow[2].value"
                            :propertyId="startFlow[2].propertyId"
                            @submit="handleStepSubmit"
                            :index="2"
                            v-loading="startFlow[2].loading"
                        />
                        <div class="arrow-down-row"><span class="arrow-down">↓</span></div>
                    </div>
                    <div>
                        <flow-step :title="startFlow[2].name" type="action" :index="2"/>
                        <div class="arrow-down-row"><span class="arrow-down">↓</span></div>
                    </div>
                    <div class="branch-row">
                        <div class="branch-col">
                            <flow-step
                                :title="'等待'"
                                type="wait"
                                :propertyId="startFlow[3].propertyId"
                                v-model="startFlow[3].value"
                                @submit="handleStepSubmit"
                                :index="3"
                                v-loading="startFlow[3].loading"
                            />
                            <div class="arrow-down-row"><span class="arrow-down">↓</span></div>
                            <flow-step :title="startFlow[3].name" type="action" :index="3"/>
                            <div class="arrow-down-row"><span class="arrow-down">↓</span></div>
                            <flow-step
                                :title="'等待'"
                                type="wait"
                                v-model="startFlow[4].value"
                                :propertyId="startFlow[4].propertyId"
                                @submit="handleStepSubmit"
                                :index="4"
                                v-loading="startFlow[4].loading"
                            />
                            <div class="arrow-down-row"><span class="arrow-down">↓</span></div>
                            <flow-step :title="startFlow[4].name" type="action" :index="4"/>
                        </div>
                        <div class="branch-col">
                            <flow-step
                                :title="'等待'"
                                type="wait"
                                v-model="startFlow[5].value"
                                :propertyId="startFlow[5].propertyId"
                                @submit="handleStepSubmit"
                                :index="5"
                                v-loading="startFlow[5].loading"
                            />
                            <div class="arrow-down-row"><span class="arrow-down">↓</span></div>
                            <flow-step :title="startFlow[5].name" type="action" :index="5"/>
                            <div class="arrow-down-row"><span class="arrow-down">↓</span></div>
                            <flow-step
                                :title="'等待'"
                                type="wait"
                                v-model="startFlow[6].value"
                                :propertyId="startFlow[6].propertyId"
                                @submit="handleStepSubmit"
                                :index="6"
                                v-loading="startFlow[6].loading"
                            />
                            <div class="arrow-down-row"><span class="arrow-down">↓</span></div>
                            <flow-step :title="startFlow[6].name" type="action" :index="6"/>
                            <div class="arrow-down-row"><span class="arrow-down">↓</span></div>
                            <div class="branch-row two-branches">
                                <div class="branch-col">
                                    <flow-step
                                        :title="startFlow[7].title"
                                        type="sensor-wait"
                                        v-model="startFlow[7].value"
                                        :propertyId="startFlow[7].propertyId"
                                        @submit="handleStepSubmit"
                                        :index="7"
                                        v-loading="startFlow[7].loading"
                                    />
                                    <div class="arrow-down-row"><span class="arrow-down">↓</span></div>
                                    <flow-step :title="startFlow[7].name" type="action" :index="7"/>
                                </div>
                                <div class="branch-col">
                                    <flow-step
                                        :title="startFlow[8].title"
                                        type="sensor-wait"
                                        v-model="startFlow[8].value"
                                        :propertyId="startFlow[8].propertyId"
                                        @submit="handleStepSubmit"
                                        :index="8"
                                        v-loading="startFlow[8].loading"
                                    />
                                    <div class="arrow-down-row"><span class="arrow-down">↓</span></div>
                                    <flow-step :title="startFlow[8].name" type="action" :index="8"/>
                                </div>
                            </div>
                            <div class="arrow-down-row"><span class="arrow-down">↓</span></div>
                            <div>
                                <flow-step
                                    :title="startFlow[9].title"
                                    type="sensor-wait"
                                    v-model="startFlow[9].value"
                                    :propertyId="startFlow[9].propertyId"
                                    @submit="handleStepSubmit"
                                    :index="9"
                                    v-loading="startFlow[9].loading"
                                />
                                <div class="arrow-down-row"><span class="arrow-down">↓</span></div>
                            </div>
                            <div>
                                <flow-step :title="startFlow[9].name" type="action" :index="9"/>
                                <div class="arrow-down-row"><span class="arrow-down">↓</span></div>
                            </div>
                            <!-- 最后分支：一行两个竖直分支 -->
                            <div class="branch-row">
                                <div class="branch-col">
                                    <flow-step
                                        :title="'等待'"
                                        type="wait"
                                        v-model="startFlow[10].value"
                                        :propertyId="startFlow[10].propertyId"
                                        @submit="handleStepSubmit"
                                        :index="10"
                                        v-loading="startFlow[10].loading"
                                    />
                                    <div class="arrow-down-row"><span class="arrow-down">↓</span></div>
                                    <flow-step :title="startFlow[10].name" type="action" :index="10"/>
                                </div>
                                <div class="branch-col">
                                    <flow-step
                                        :title="'等待'"
                                        type="wait"
                                        v-model="startFlow[11].value"
                                        :propertyId="startFlow[11].propertyId"
                                        @submit="handleStepSubmit"
                                        :index="11"
                                        v-loading="startFlow[11].loading"
                                    />
                                    <div class="arrow-down-row"><span class="arrow-down">↓</span></div>
                                    <flow-step :title="startFlow[11].name" type="action" :index="11"/>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </el-tab-pane>
            <el-tab-pane label="结束流程" name="end">
                <div class="flow-title">结束流程</div>
                <!-- 四大分支 -->
                <div class="section-title">谷斗无物料处理</div>
                <div class="flow-vertical">
                    <div>
                        <flow-step
                            :title="endFlow[0].title"
                            type="sensor-wait"
                            v-model="endFlow[0].value"
                            :propertyId="endFlow[0].propertyId"
                            @submit="handleStepSubmit"
                            :index="0"
                            v-loading="endFlow[0].loading"
                        />
                        <div class="arrow-down-row"><span class="arrow-down">↓</span></div>
                    </div>
                    <div>
                        <flow-step :title="endFlow[0].name" type="action" :index="0"/>
                        <div class="arrow-down-row"><span class="arrow-down">↓</span></div>
                    </div>
                    <div class="branch-row">
                        <div class="branch-col">
                            <flow-step
                                :title="'等待'"
                                type="wait"
                                v-model="endFlow[1].value"
                                @submit="handleStepSubmit"
                                :propertyId="endFlow[1].propertyId"
                                :index="1"
                                v-loading="endFlow[1].loading"
                            />
                            <div class="arrow-down-row"><span class="arrow-down">↓</span></div>
                            <flow-step :title="endFlow[1].name" type="action" :index="1"/>
                        </div>
                        <div class="branch-col">
                            <flow-step
                                :title="'等待'"
                                type="wait"
                                v-model="endFlow[2].value"
                                @submit="handleStepSubmit"
                                :propertyId="endFlow[2].propertyId"
                                :index="2"
                                v-loading="endFlow[2].loading"
                            />
                            <div class="arrow-down-row"><span class="arrow-down">↓</span></div>
                            <flow-step :title="endFlow[2].name" type="action" :index="2"/>
                        </div>
                    </div>
                </div>
                <div class="section-title">重力筛1号无物料处理</div>
                <div class="branch-row three-branches">
                    <!-- 第二条-第一条路线 -->
                    <div class="branch-col">
                        <flow-step
                            :title="endFlow[3].title"
                            type="sensor-wait"
                            v-model="endFlow[3].value"
                            :propertyId="endFlow[3].propertyId"
                            @submit="handleStepSubmit"
                            :index="3"
                            v-loading="endFlow[3].loading"
                        />
                        <div class="arrow-down-row"><span class="arrow-down">↓</span></div>
                        <flow-step :title="endFlow[3].name" type="action" :index="3"/>
                        <div class="arrow-down-row"><span class="arrow-down">↓</span></div>
                        <flow-step
                            :title="'等待'"
                            type="wait"
                            :propertyId="endFlow[4].propertyId"
                            v-model="endFlow[4].value"
                            @submit="handleStepSubmit"
                            :index="4"
                            v-loading="endFlow[4].loading"
                        />
                        <div class="arrow-down-row"><span class="arrow-down">↓</span></div>
                        <flow-step :title="endFlow[4].name" type="action" :index="4"/>
                        <div class="arrow-down-row"><span class="arrow-down">↓</span></div>
                        <flow-step
                            :title="'等待'"
                            type="wait"
                            v-model="endFlow[5].value"
                            :propertyId="endFlow[5].propertyId"
                            @submit="handleStepSubmit"
                            :index="5"
                            v-loading="endFlow[5].loading"
                        />
                        <div class="arrow-down-row"><span class="arrow-down">↓</span></div>
                        <flow-step :title="endFlow[5].name" type="action" :index="5"/>
                        <div class="arrow-down-row"><span class="arrow-down">↓</span></div>
                        <flow-step
                            :title="'等待'"
                            type="wait"
                            v-model="endFlow[6].value"
                            :propertyId="endFlow[6].propertyId"
                            @submit="handleStepSubmit"
                            :index="6"
                            v-loading="endFlow[6].loading"
                        />
                        <div class="arrow-down-row"><span class="arrow-down">↓</span></div>
                        <flow-step :title="endFlow[6].name" type="action" :index="6"/>
                        <div class="arrow-down-row"><span class="arrow-down">↓</span></div>
                        <flow-step
                            :title="'等待'"
                            type="wait"
                            v-model="endFlow[7].value"
                            :propertyId="endFlow[7].propertyId"
                            @submit="handleStepSubmit"
                            :index="7"
                            v-loading="endFlow[7].loading"
                        />
                        <div class="arrow-down-row"><span class="arrow-down">↓</span></div>
                        <flow-step :title="endFlow[7].name" type="action" :index="7"/>
                        <div class="arrow-down-row"><span class="arrow-down">↓</span></div>
                    </div>
                    <!-- 第二条-第二条路线 -->
                    <div class="branch-col">
                        <flow-step
                            :title="endFlow[12].title"
                            type="sensor-wait"
                            v-model="endFlow[12].value"
                            :propertyId="endFlow[12].propertyId"
                            @submit="handleStepSubmit"
                            :index="12"
                            v-loading="endFlow[12].loading"
                        />
                        <div class="arrow-down-row"><span class="arrow-down">↓</span></div>
                        <flow-step :title="endFlow[12].name" type="action" :index="12"/>
                    </div>
                    <!-- 第二条-第三条路线 -->
                    <div class="branch-col">
                        <flow-step
                            :title="endFlow[13].title"
                            type="sensor-wait"
                            v-model="endFlow[13].value"
                            :propertyId="endFlow[13].propertyId"
                            @submit="handleStepSubmit"
                            :index="13"
                            v-loading="endFlow[13].loading"
                        />
                        <div class="arrow-down-row"><span class="arrow-down">↓</span></div>
                        <flow-step :title="endFlow[13].name" type="action" :index="13"/>
                    </div>
                </div>
                <!-- 四条分支 -->
                <el-row :gutter="15" class="four-branches">
                    <el-col :xs="12" :sm="8" :md="6" :lg="6" :xl="12">
                        <div class="branch-content">
                            <flow-step
                                :title="'等待'"
                                type="wait"
                                v-model="endFlow[8].value"
                                @submit="handleStepSubmit"
                                :propertyId="endFlow[8].propertyId"
                                :index="8"
                                v-loading="endFlow[8].loading"
                            />
                            <div class="arrow-down-row"><span class="arrow-down">↓</span></div>
                            <flow-step :title="endFlow[8].name" type="action" :index="8"/>
                        </div>
                    </el-col>
                    <el-col :xs="12" :sm="8" :md="6" :lg="6" :xl="12">
                        <div class="branch-content">
                            <flow-step
                                :title="'等待'"
                                type="wait"
                                v-model="endFlow[9].value"
                                @submit="handleStepSubmit"
                                :propertyId="endFlow[9].propertyId"
                                :index="9"
                                v-loading="endFlow[9].loading"
                            />
                            <div class="arrow-down-row"><span class="arrow-down">↓</span></div>
                            <flow-step :title="endFlow[9].name" type="action" :index="9"/>
                        </div>
                    </el-col>
                    <el-col :xs="12" :sm="8" :md="6" :lg="6" :xl="12">
                        <div class="branch-content">
                            <flow-step
                                :title="'等待'"
                                type="wait"
                                v-model="endFlow[10].value"
                                @submit="handleStepSubmit"
                                :propertyId="endFlow[10].propertyId"
                                :index="10"
                                v-loading="endFlow[10].loading"
                            />
                            <div class="arrow-down-row"><span class="arrow-down">↓</span></div>
                            <flow-step :title="endFlow[10].name" type="action" :index="10"/>
                        </div>
                    </el-col>
                    <el-col :xs="12" :sm="8" :md="6" :lg="6" :xl="12">
                        <div class="branch-content">
                            <flow-step
                                :title="'等待'"
                                type="wait"
                                v-model="endFlow[11].value"
                                @submit="handleStepSubmit"
                                :propertyId="endFlow[11].propertyId"
                                :index="11"
                                v-loading="endFlow[11].loading"
                            />
                            <div class="arrow-down-row"><span class="arrow-down">↓</span></div>
                            <flow-step :title="endFlow[11].name" type="action" :index="11"/>
                        </div>
                    </el-col>
                </el-row>
                <div class="section-title">重力筛2号无物料处理</div>
                <div class="branch-row">
                    <div class="branch-col">
                        <flow-step
                            :title="endFlow[14].title"
                            type="sensor-wait"
                            v-model="endFlow[14].value"
                            :propertyId="endFlow[14].propertyId"
                            @submit="handleStepSubmit"
                            :index="14"
                            v-loading="endFlow[14].loading"
                        />
                        <div class="arrow-down-row"><span class="arrow-down">↓</span></div>
                        <flow-step :title="endFlow[14].name" type="action" :index="14"/>
                    </div>
                    <div class="branch-col">
                        <flow-step
                            :title="endFlow[15].title"
                            type="sensor-wait"
                            v-model="endFlow[15].value"
                            :propertyId="endFlow[15].propertyId"
                            @submit="handleStepSubmit"
                            :index="15"
                            v-loading="endFlow[15].loading"
                        />
                        <div class="arrow-down-row"><span class="arrow-down">↓</span></div>
                        <flow-step :title="endFlow[15].name" type="action" :index="15"/>
                    </div>
                </div>
                <div class="section-title">白米斗无物料处理</div>
                <div class="flow-vertical">
                    <div>
                        <flow-step
                            :title="endFlow[16].title"
                            type="sensor-wait"
                            v-model="endFlow[16].value"
                            :propertyId="endFlow[16].propertyId"
                            @submit="handleStepSubmit"
                            :index="16"
                            v-loading="endFlow[16].loading"
                        />
                        <div class="arrow-down-row"><span class="arrow-down">↓</span></div>
                    </div>
                    <div>
                        <flow-step :title="endFlow[16].name" type="action" :index="16"/>
                        <div class="arrow-down-row"><span class="arrow-down">↓</span></div>
                    </div>
                    <div>
                        <flow-step
                            :title="'等待'"
                            :propertyId="endFlow[17].propertyId"
                            type="wait"
                            v-model="endFlow[17].value"
                            @submit="handleStepSubmit"
                            :index="17"
                            v-loading="endFlow[17].loading"
                        />
                        <div class="arrow-down-row"><span class="arrow-down">↓</span></div>
                    </div>
                    <div>
                        <flow-step :title="endFlow[17].name" type="action" :index="17"/>
                        <div class="arrow-down-row"><span class="arrow-down">↓</span></div>
                    </div>
                    <div class="branch-row">
                        <div class="branch-col">
                            <flow-step
                                :title="'等待'"
                                :propertyId="endFlow[18].propertyId"
                                type="wait"
                                v-model="endFlow[18].value"
                                @submit="handleStepSubmit"
                                :index="18"
                                v-loading="endFlow[18].loading"
                            />
                            <div class="arrow-down-row"><span class="arrow-down">↓</span></div>
                            <flow-step :title="endFlow[18].name" type="action" :index="18"/>
                        </div>
                        <div class="branch-col">
                            <flow-step
                                :title="'等待'"
                                type="wait"
                                :propertyId="endFlow[19].propertyId"
                                v-model="endFlow[19].value"
                                @submit="handleStepSubmit"
                                :index="19"
                                v-loading="endFlow[19].loading"
                            />
                            <div class="arrow-down-row"><span class="arrow-down">↓</span></div>
                            <flow-step :title="endFlow[19].name" type="action" :index="19"/>
                        </div>
                    </div>
                </div>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script>
import FlowStep from './FlowStep.vue'
import {
    listInstanceProperty,
    instanceFunctionInvoke, getDeviceProduct
} from '@/api/device/product'
import { genUUID } from '@/utils/ruoyi'

export default {
    name: 'index',
    components: {
        FlowStep
    },
    data() {
        return {
            activeTab: 'start',
            webClientId: genUUID(),
            productId: '',
            deviceId: '',
            startFlow: [
                {
                    value: null,
                    title: '谷斗连续感应到有物料',
                    propertyId: null,
                    name: '风提升电机开',
                    timer: null,
                    loading: false
                },
                { value: null, title: '等待', propertyId: null, name: '谷斗入料气缸开', timer: null, loading: false },
                {
                    value: null,
                    title: '谷斗连续感应到有物料',
                    propertyId: null,
                    name: '去石机电机开',
                    timer: null,
                    loading: false
                },
                { value: null, title: '等待', propertyId: null, name: '砻谷机开', timer: null, loading: false },
                { value: null, title: '等待', propertyId: null, name: '砻谷下料气缸开', timer: null, loading: false },
                { value: null, title: '等待', propertyId: null, name: '粉碎机开', timer: null, loading: false },
                { value: null, title: '等待', propertyId: null, name: '重力筛电机开', timer: null, loading: false },
                {
                    value: null,
                    title: '重力筛1号传感器连续感应到有物料',
                    propertyId: null,
                    name: '重力筛下白米斗气缸1开',
                    timer: null,
                    loading: false
                },
                {
                    value: null,
                    title: '重力筛2号传感器连续感应到有物料',
                    propertyId: null,
                    name: '重力筛下白米斗气缸2开',
                    timer: null,
                    loading: false
                },
                {
                    value: null,
                    title: '白米斗传感器连续感应到有物料',
                    propertyId: null,
                    name: '碾米机开',
                    timer: null,
                    loading: false
                },
                { value: null, title: '等待', propertyId: null, name: '碎米筛电机开', timer: null, loading: false },
                { value: null, title: '等待', propertyId: null, name: '白米斗下料气缸开', timer: null, loading: false }
            ],
            endFlow: [
                {
                    value: null,
                    title: '谷斗连续感应到没有物料',
                    propertyId: null,
                    name: '谷斗入料气缸关',
                    timer: null,
                    loading: false
                },
                { value: null, title: '等待', propertyId: null, name: '风提升电机关', timer: null, loading: false },
                { value: null, title: '等待', propertyId: null, name: '去石机电机关', timer: null, loading: false },
                {
                    value: null,
                    title: '重力筛1号没有感应到物料',
                    propertyId: null,
                    name: '重力筛下白米斗气缸1关',
                    timer: null,
                    loading: false
                },
                { value: null, title: '等待', propertyId: null, name: '重力筛电机关', timer: null, loading: false },
                {
                    value: null,
                    title: '等待',
                    propertyId: null,
                    name: '砻谷入白米斗气缸开',
                    timer: null,
                    loading: false
                },
                { value: null, title: '等待', propertyId: null, name: '砻谷下料气缸关', timer: null, loading: false },
                { value: null, title: '等待', propertyId: null, name: '砻谷机关', timer: null, loading: false },
                {
                    value: null,
                    title: '等待',
                    propertyId: null,
                    name: '砻谷出重力筛气缸关',
                    timer: null,
                    loading: false
                },
                {
                    value: null,
                    title: '等待',
                    propertyId: null,
                    name: '重力筛回砻谷机气缸关',
                    timer: null,
                    loading: false
                },
                { value: null, title: '等待', propertyId: null, name: '砻谷机止料气缸关', timer: null, loading: false },
                {
                    value: null,
                    title: '等待',
                    propertyId: null,
                    name: '砻谷入白米斗气缸关',
                    timer: null,
                    loading: false
                },
                {
                    value: null,
                    title: '重力筛1号没有感应到物料',
                    propertyId: null,
                    name: '砻谷出重力筛气缸开',
                    timer: null,
                    loading: false
                },
                {
                    value: null,
                    title: '重力筛1号没有感应到物料',
                    propertyId: null,
                    name: '砻谷机止料气缸开',
                    timer: null,
                    loading: false
                },
                {
                    value: null,
                    title: '重力筛2号没有感应到物料',
                    propertyId: null,
                    name: '重力筛下白米斗气缸2关',
                    timer: null,
                    loading: false
                },
                {
                    value: null,
                    title: '重力筛2号没有感应到物料',
                    propertyId: null,
                    name: '重力筛回砻谷机气缸开',
                    timer: null,
                    loading: false
                },
                {
                    value: null,
                    title: '白米斗传感器连续感应到没有物料',
                    propertyId: null,
                    name: '白米斗下料气缸关',
                    timer: null,
                    loading: false
                },
                { value: null, title: '等待', propertyId: null, name: '碾米机关', timer: null, loading: false },
                { value: null, title: '等待', propertyId: null, name: '粉碎机关', timer: null, loading: false },
                { value: null, title: '等待', propertyId: null, name: '碎米筛电机关', timer: null, loading: false }
            ],
            // 产品信息
            productInfo: {},
            // 元数据属性列表
            metadataProperties: [],
            // 名称到ID的映射
            nameToIdMap: {}
        }
    },
    created() {
        if (this.$route.query && this.$route.query.productId) {
            this.productId = this.$route.query.productId
            this.handleViewProduct()
        }
        if (this.$route.query && this.$route.query.deviceId) {
            this.deviceId = this.$route.query.deviceId
            // this.listInstancePropertyData()
        }
    },
    methods: {
        goBack() {
            this.$router.push('/equipment/riceHuskingMachine')
        },
        // 查看产品详情
        handleViewProduct() {
            getDeviceProduct(this.productId).then(response => {
                this.productInfo = response.data
                // 解析metadata
                if (this.productInfo.metadata) {
                    try {
                        const metadata = JSON.parse(this.productInfo.metadata)
                        // 只保留包含"等待时"或"等待时间"的属性，并去掉名称中的后缀
                        this.metadataProperties = (metadata.properties || [])
                            .filter(prop => prop.name.includes('等待时') || prop.name.includes('等待时间'))
                            .map(prop => ({
                                ...prop,
                                name: prop.name.replace(/等待时间?/, ''), // 使用正则表达式匹配"等待时"或"等待时间"
                                value: null // 初始化值为null
                            }))
                        // console.log('metadataProperties',this.metadataProperties)
                        // console.log('metadata',metadata)
                        // 创建名称到ID的映射
                        this.createNameToIdMap(this.metadataProperties)
                    } catch (e) {
                        console.error('解析metadata失败:', e)
                        this.metadataProperties = []
                    }
                }
            })
        },

        // 创建名称到ID的映射
        createNameToIdMap(properties) {
            // 创建动作标题到ID的映射
            const actionTitleToId = {}
            // 遍历所有流程数组，创建名称到ID的映射
            const allFlows = [...this.startFlow, ...this.endFlow]
            allFlows.forEach(flow => {
                const matchedProperty = properties.find(prop => prop.name === flow.name)
                if (matchedProperty) {
                    actionTitleToId[flow.name] = matchedProperty.id
                }
            })
            // console.log('actionTitleToId:', actionTitleToId)
            // console.log('Total mappings:', Object.keys(actionTitleToId).length)

            // 辅助函数：为流程数组赋 propertyId
            const assignPropertyIdForAllSteps = (flowArr) => {
                for (let item of flowArr) {
                    if (item.name) {
                        const actionId = actionTitleToId[item.name]
                        if (actionId) {
                            item.propertyId = actionId
                        }
                    }
                }
            }

            // 为所有流程数组分配 propertyId
            assignPropertyIdForAllSteps(this.startFlow)
            assignPropertyIdForAllSteps(this.endFlow)

            // 打印所有步骤的name和propertyId
            // const allSteps = [ ...this.startFlow, ...this.endFlow]
            // allSteps.forEach((step, index) => {
            //     console.log(`${index + 1}. Name: ${step.name}, PropertyId: ${step.propertyId}`)
            // })

            // console.log('Updated flows:', {
            //     startFlow: this.startFlow,
            //     endFlow: this.endFlow
            // })
            this.listInstancePropertyData()
        },

        listInstancePropertyData() {
            let obj = {
                deviceId: this.deviceId
            }
            listInstanceProperty(obj).then(res => {
                // console.log('res',res.data)
                // 你拿到 res.data 后，先转成 propertyMap
                const propertyMap = res.data.reduce((acc, item) => {
                    acc[item.propertyId] = item.propertyFormatValue
                    return acc
                }, {})
                this.updateFlowValues(propertyMap)
            })
        },
        updateFlowValues(propertyMap) {
            // propertyMap: { [propertyId]: propertyFormatValue }
            const update = (flowArr) => {
                flowArr.forEach(flow => {
                    const value = propertyMap[flow.propertyId]
                    if (value !== undefined) {
                        flow.value = value === '' ? null : Number(value)
                    }
                })
            }
            update(this.startFlow)
            update(this.endFlow)
            // console.log('Updated flows finally:', {
            //     startFlow: this.startFlow,
            //     endFlow: this.endFlow
            // })
        },
        async handleStepSubmit({ value, type, title, propertyId, index }) {
            // console.log('value', value)
            // console.log('index', index)
            // console.log('propertyId', propertyId)
            let flowIndex = -1
            let currentFlow = null
            this.getTimer(index)

            // 根据propertyId找到对应的流程步骤
            if (this.activeTab === 'start') {
                flowIndex = this.startFlow.findIndex(flow => flow.propertyId === propertyId)
                if (flowIndex !== -1) {
                    currentFlow = this.startFlow[flowIndex]
                }
                this.startFlow[index].loading = true
            } else {
                flowIndex = this.endFlow.findIndex(flow => flow.propertyId === propertyId)
                if (flowIndex !== -1) {
                    currentFlow = this.endFlow[flowIndex]
                }
                this.endFlow[index].loading = true
            }

            if (!currentFlow) {
                this.$message.error('未找到对应的流程步骤')
                return
            }

            try {
                const res = await instanceFunctionInvoke({
                    productId: this.productId,
                    deviceId: this.deviceId,
                    functionId: 'modbus-write10',
                    data: {
                        id: propertyId,
                        value: value.toString()
                    },
                    clientId: this.webClientId
                })
                // console.log('res', res)
                if (res.data) {
                    let obj = {
                        'webClientId': this.webClientId,
                        'type': 'login'
                    }
                    this.sendMessage(obj)
                }
                // this.$message.success('更新成功')
            } catch (error) {
                // this.$message.error('更新失败')
                this.resetTime()
            }
        },
        getTimer(index) {
            let loadingTime = 30
            let that = this
            if (this.activeTab === 'start') {
                this.startFlow[index].timer = setInterval(() => {
                    if (loadingTime <= 0) {
                        that.resetTime(index)
                    } else {
                        // loadingText.value = loadingTime+ 's'
                        --loadingTime
                    }
                }, 1000)
            } else {
                this.endFlow[index].timer = setInterval(() => {
                    if (loadingTime <= 0) {
                        that.resetTime(index)
                    } else {
                        // loadingText.value = loadingTime+ 's'
                        --loadingTime
                    }
                }, 1000)
            }
        },
        // 重置
        resetTime(index) {
            // 根据propertyId找到对应的流程步骤
            if (this.activeTab === 'start') {
                this.startFlow[index].loading = false
                clearInterval(this.startFlow[index].timer)
            } else {
                this.endFlow[index].loading = false
                clearInterval(this.endFlow[index].timer)
            }
            this.$message.error('系统繁忙，请稍后再试')
        },
        // websocket 发送消息给服务器
        sendMessage(obj) {
            if (this.ws !== undefined && this.ws.readyState === 1) {
                console.log('exist')
                // this.$websocket.sendMsg(obj)
            } else {
                this.localSocket(obj)
            }
        },
        localSocket(obj) {
            let that = this
            if ('WebSocket' in window) {
                console.log('您的浏览器支持 WebSocket')
                // console.log('that.ws', that.ws)
                if (that.ws !== undefined && that.ws.readyState === 1) {
                    console.log('exist')
                    return
                }

                that.ws = new WebSocket(that.$websocket.url)
                that.$websocket.setWs(that.ws)
                that.ws.onopen = function() {
                    console.log('开始连接')
                    // that.sendMessage(obj)
                    that.$websocket.sendMsg(obj)
                }
                // websocket 接收服务器消息
                that.ws.onmessage = function(result) {
                    console.log('收到websocket回复', result)
                    // console.log('回复data', result.data)
                    that.processData(result.data)
                }
                that.ws.onclose = function() {
                    // 防链接超时，（websocket在一定时间内没有数据交互，就会断开），关闭后重启
                    console.log('连接已关闭')
                    that.ws.close()
                    // setTimeout(() => {
                    //     that.localSocket()
                    // }, 2000)
                }
            } else {
                // 浏览器不支持 WebSocket
                console.log('您的浏览器不支持 WebSocket!')
            }
        },
        processData(json) {
            console.log('json', json)
            if (json === 'ok') {
                console.log('WebSocket连接成功')
                return
            }

            let data = {}
            try {
                data = JSON.parse(json)
                console.log('data', data)
                // 检查是否包含必要的字段
                if (data.webClientId && data.id && data.value !== undefined) {
                    // 根据id找到对应的流程步骤
                    let foundStep = null
                    let flowArray = this.activeTab === 'start' ? this.startFlow : this.endFlow
                    // 在流程数组中查找匹配的步骤
                    const stepIndex = flowArray.findIndex(step => step.propertyId === data.id)

                    if (stepIndex !== -1) {
                        foundStep = flowArray[stepIndex]
                        foundStep.loading = false
                        clearInterval(foundStep.timer)
                        foundStep.value = parseFloat(data.value)
                        this.$message.success('保存成功')
                    } else {
                        console.warn('未找到匹配的步骤:', data.id)
                    }
                }
            } catch (e) {
                console.error('解析数据失败:', e)
            }
        }
    }
}
</script>

<style scoped>
.flow-mobile {
    max-width: 520px;
    margin: 0 auto;
    /*background: #f5f7fa;*/
    min-height: 100vh;
}

.flow-tabs {
    background: #fff;
    border-radius: 10px;
    margin-bottom: 1rem;
    padding: 10px;
}

.flow-title {
    font-size: 1.3rem;
    font-weight: bold;
    color: #2196f3;
    margin-bottom: 1rem;
    text-align: center;
}

.section-title {
    font-size: 1.1rem;
    font-weight: bold;
    color: #4caf50;
    margin: 1.2rem 0 0.5rem 0.2rem;
}

.flow-vertical {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.arrow-down-row {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0.1rem 0 0.3rem 0;
}

.arrow-down {
    font-size: 2rem;
    color: #2196f3;
    font-weight: bold;
}

.branch-row {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    gap: 0.5rem;
    margin: 0.2rem 0 0.5rem 0;
    padding-left: 0;
    margin-left: -20px; /* 向左偏移 */
}

.branch-col {
    flex: 0 0 140px;
    min-width: 140px;
    max-width: 140px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.branch-row .step-title,
.branch-row .wait-label,
.branch-row .wait-unit {
    font-size: 0.8rem;
    text-align: center;
    width: 100%;
}

@media (max-width: 600px) {
    .branch-col {
        flex: 0 0 110px;
        min-width: 110px;
        max-width: 110px;
    }

    .branch-row .flow-step {
        width: 100%;
        padding: 0.3rem 0.1rem;
    }

    .branch-row .step-input-large {
        max-width: 70px !important;
        font-size: 0.8rem !important;
    }

    .branch-row {
        margin-left: -15px; /* 移动端稍微少偏移一点 */
    }
}

.sensor-wait-input {
    width: 100%;
    display: flex;
    justify-content: center;
    margin: 0.2rem 0;
}

.wait-unit {
    display: block;
    width: 100%;
    text-align: center;
    margin-top: 0.1rem;
}

/* 三条分支的特殊样式 */
.branch-row.three-branches {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    gap: 0.3rem;
    overflow-x: auto;
    padding-bottom: 0.5rem;
    /* 隐藏滚动条但保持功能 */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */
}

.branch-row.three-branches::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}

.branch-row.three-branches .branch-col {
    flex: 0 0 100px;
    min-width: 100px;
}

/* 四条分支的特殊样式 */
.four-branches {
    width: 100%;
    margin: 0 !important;
}

.four-branches .el-col {
    padding: 0 8px !important;
    margin-bottom: 10px;
}

.four-branches .branch-content {
    /*background: #f5f7fa;*/
    border-radius: 4px;
    padding: 8px;
    height: 100%;
}

.four-branches .flow-step {
    width: 100%;
    padding: 0.5rem 0.3rem;
}

.four-branches .step-title,
.four-branches .wait-label,
.four-branches .wait-unit {
    font-size: 0.9rem;
    white-space: normal;
    word-break: break-all;
    text-align: center;
}

.four-branches .step-input-large {
    width: 100px !important;
    font-size: 0.9rem !important;
}

@media (max-width: 600px) {
    .four-branches .el-col {
        padding: 0 4px !important;
    }

    .four-branches .branch-content {
        padding: 6px;
    }

    .four-branches .flow-step {
        padding: 0.3rem 0.2rem;
    }

    .four-branches .step-input-large {
        width: 80px !important;
        font-size: 0.8rem !important;
    }
}

/* 传感器分支的特殊样式 */
.branch-row.sensor-branches {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    gap: 1rem;
    width: 100%;
}

.branch-row.sensor-branches .branch-col {
    flex: 0 0 160px;
    min-width: 160px;
    max-width: 160px;
}

.branch-row.sensor-branches .step-title,
.branch-row.sensor-branches .wait-label,
.branch-row.sensor-branches .wait-unit {
    font-size: 0.8rem;
}

@media (max-width: 600px) {
    .branch-row.sensor-branches .branch-col {
        flex: 0 0 120px;
        min-width: 120px;
        max-width: 120px;
    }

    .branch-row.sensor-branches .flow-step {
        width: 100%;
        padding: 0.3rem 0.1rem;
    }

    .branch-row.sensor-branches .step-input-large {
        max-width: 80px !important;
        font-size: 0.8rem !important;
    }
}

.branch-row.start-flow-branches {
    margin-left: -20px; /* 只对开始流程的分支进行偏移 */
}

@media (max-width: 600px) {
    .branch-row.start-flow-branches {
        margin-left: -15px; /* 移动端稍微少偏移一点 */
    }
}

.branch-row.two-branches {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    margin: 0.2rem 0 0.5rem 0;
    padding-left: 0;
}

.branch-row.two-branches .branch-col {
    flex: 0 0 130px;
    min-width: 110px;
    max-width: 140px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

@media (max-width: 600px) {
    .branch-row.two-branches .branch-col {
        flex: 0 0 90px;
        min-width: 80px;
        max-width: 100px;
    }
}

.page-header {
    margin-bottom: 20px;
    padding: 16px;
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
}

.page-header ::v-deep(.el-page-header__title) {
    font-size: 16px;
    font-weight: bold;
}

.page-header ::v-deep(.el-page-header__content) {
    font-size: 16px;
}

@media (max-width: 600px) {
    .page-header {
        padding: 12px;
        margin-bottom: 15px;
    }

    .page-header ::v-deep(.el-page-header__title) {
        font-size: 14px;
    }

    .page-header ::v-deep(.el-page-header__content) {
        font-size: 14px;
    }
}
</style>
